<template>
  <div
    id="lineAndHistogram"
    ref="lineAndHistogram"
    :style="{ width: chartWidth, height: chartHeight }"
  />
</template>
<script>
import * as echarts from 'echarts'
import { ruoyiFloat } from '@/utils/ruoyi'
export default {
  props: {
    chartData: {
      type: Array,
      default: () => []
    },
    chartWidth: {
      type: String,
      default: '100%'
    },
    chartHeight: {
      type: String,
      default: '50vh'
    },
    chartTitle: {
      type: Array,
      default: () => []
    },
    topTitle: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      lineAndHistogram: null,
      newChartData: {},
      valueData: {},
      titleData: []
    }
  },
  computed: {
    chartOptions() {
      const options = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
            shadowStyle: {
              shadowColor: 'rgba(60, 161, 246, 0.43)',
              shadowBlur: 10
            }
          },
          backgroundColor: '#FFFFFF',
          borderColor: 'rgba(60, 161, 246, 0.43)',
          borderWidth: 1,
          shadowColor: ' rgba(111, 193, 253, 0.35)',
          shadowBlur: 10,
          formatter(params) {
            // return params.value;
            var strName1 = params[0].seriesName
            var value1 = params[0].value
            var strName2 = params[1].seriesName
            var value2 = params[1].value
            var strName3 = params[2].seriesName
            var value3 = params[2].value
            console.log(strName3, strName1, strName2)
            return '<div>' +
                   '  <span style="color:rgba(36, 36, 36, 1);display: inline-block;width: 10vh;">EST</span>' +
                   '  <span style="color:#5DB6FB">' + value1 + '</span>' +
                   '</div>' +
                   '<div>' +
                   '  <span style="color:rgba(36, 36, 36, 1);display: inline-block;width: 10vh;">ACT</span>' +
                   '  <span style="color:#5DB6FB">' + value2 + '</span>' +
                   '</div>' +
                   '<div>' +
                   '  <span style="color:rgba(36, 36, 36, 1);display: inline-block;width: 10vh;">(%)</span>' +
                   '  <span style="color:#5DB6FB">' + value3 + '%</span>' +
                   '</div>'
          },
          textStyle: {
            fontSize: this.fitChartFont(13),
            rich: {
              name: {
                color: 'rgba(36, 36, 36, 1)',
                fontSize: this.fitChartFont(13),
                align: 'center'
              },
              percent: {
                fontFamily: 'DIN',
                fontWeight: 500,
                fontSize: this.fitChartFont(22),
                color: '#1D91F5',
                align: 'center'
              }
            }
          }
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '14%',
          top: '16%',
          containLabel: true
        },
        legend: {
          top: '5%',
          icon: 'rect',
          itemWidth: this.fitChartFont(25),
          itemHeight: this.fitChartFont(14),
          textStyle: {
            fontSize: this.fitChartFont(13)
          }
        },
        xAxis: {
          type: 'category',
          data: this.titleData,
          axisLine: {
            lineStyle: {
              color: 'rgba(204, 204, 204, 1)'
            }
          },
          axisLabel: {
            textStyle: {
              color: 'rgba(185, 185, 185, 1)',
              fontSize: this.fitChartFont(12)
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: [{
          type: 'value',
          axisLabel: {
            textStyle: {
              color: 'rgba(185, 185, 185, 1)',
              fontSize: this.fitChartFont(12)
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(237, 237, 237, 1)',
              type: 'dotted'
            }
          }
        },
          {
            type: 'value',
            nameTextStyle: {
              color: 'rgba(185, 185, 185, 1)',
              fontSize: this.fitChartFont(12)
            },
            position: 'right',
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              formatter: '{value} %', // 右侧Y轴文字显示
              textStyle: {
                color: 'rgba(185, 185, 185, 1)',
                fontSize: this.fitChartFont(12)
              }
            }
          }
        ],
        dataZoom: [
          {
            show: this.chartTitle.length > 12,
            start: 0,
            end: 100,
            height: 15,
            bottom: 1,
            zoomOnMouseWheel: true
          },
          {
            type: 'inside',
            show: this.chartTitle.length > 12,
            start: 0,
            end: 100,
            height: this.fitChartFont(15),
            bottom: 1,
            zoomOnMouseWheel: true
          }
        ],
        series: [{
          name: this.$t(this.topTitle) + '-' + this.$t('EST'),
          type: 'bar',
          barWidth: this.fitChartFont(12),
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(141, 113, 226, 1)'
              }, {
                offset: 1,
                color: 'rgba(141, 113, 226, 0.2)'
              }])
            }
          },
          data: this.valueData.est
        },
          {
            name: this.$t(this.topTitle) + '-' + this.$t('ACT'),
            type: 'bar',
            barWidth: this.fitChartFont(12),
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(116, 178, 252, 1)'
                }, {
                  offset: 1,
                  color: 'rgba(116, 178, 252, 0.2)'
                }])
              }
            },
            data: this.valueData.act
          }, {
            name: this.$t(this.topTitle) + '-' + this.$t('%'),
            type: 'line',
            smooth: true,
            yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            symbol: 'emptycircle', // 标记的图形为实心圆
            symbolSize: 0, // 标记的大小
            itemStyle: {
              color: 'rgba(65, 197, 95, 1)'
            },
            areaStyle: {
              // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgba(65, 197, 95, 0.4)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(255,255,255, 0)'
                  }
                ],
                false
              )
            },
            data: this.valueData.ratio
          }
        ]
      }
      return options
    }
  },
  watch: {
    chartData: {
      handler(newValue) {
        this.newChartData = newValue
        this.newChartData && this.newChartData.forEach((item, index) => {
          item.data && item.data.forEach((item2, index2) => {
            this.newChartData[index].data[index2] = ruoyiFloat().formatNum(item2)
          })
        })
        this.initData()
      },
      deep: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
      if (this.chartData) {
        this.initData()
      }
    })
  },
  methods: {
    initChart() {
      const _this = this
      _this.lineAndHistogram = echarts.init(this.$refs.lineAndHistogram)
      window.addEventListener('resize', function() {
        _this.lineAndHistogram.resize()
      })
    },
    initData() {
      this.valueData = {}
      if (this.chartData) {
        this.titleData = this.chartTitle
        this.chartData.forEach(item => {
          if (item.name.includes('EST')) {
            this.valueData.est = item.data
          } else if (item.name.includes('ACT')) {
            this.valueData.act = item.data
          } else if (item.name.includes('%')) {
            this.valueData.ratio = item.data
          }
        })
      }
      this.lineAndHistogram.setOption(this.chartOptions, true)
    }
  }
}
</script>

